<template>
    <!-- Main content -->
    <div>
        <div class="row">
            <div class="col-xs-12">
                <theme-box title="渠道历史券列表">
                    <form class="form-inline" @submit.prevent v-el:form>
                        <form-select title="商户名称" :up-table="true" :sreach="true" name="mchtId"
                                     :options="mchtList"></form-select>
                        <form-input title="电子券名称" :up-table="true" name="name" :sreach="true" id="name"></form-input>
                        <form-select title="类型" :sreach="true" :up-table="true" name="type" :options="typeOptions" id="type"></form-select>
                        <form-select title="渠道方名称" :sreach="true" :up-table="true" :options="channelOptions" name="channelId" id="channelId"></form-select>
                        <span class="pull-right">
                            <button type="reset" @click="reset" class="btn btn-warning pull-right">重置</button>
                            <v-button theme="primary" @click="search" class="pull-right">查询</v-button>
                        </span>
                    </form>
                    <table class="table table-bordered table-striped" style="width:100%" v-el:table>
                    </table>
                </theme-box>
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.content -->
</template>

<style lang="less" scoped>
    .form-inline .btn+.btn {
        margin-right: 10px;
    }
</style>

<script>
    //解决datatables弹窗警告
    $.fn.dataTable.ext.errMode = 'none';
    import {
        dateTime,
        createDataTable
    } from 'ui/collections/general.js'
    var serialize = require('form-serialize');
    import {dateFormat} from "lib/method.js"

    var dataTable;
    var columnsSet;
    export default {
        data: () => ({
            item: {},
            columnsSet: [],
            mchtList:[], //商户列表
            channelOptions:[
                {key:"所有渠道方",value:""},
                {key:"兴业",value:"CIB"},
                {key:"浦发",value:"SPDB"}
            ],
            typeOptions: [
                {key: "所有类型", value: ""},
                {key: "折扣券", value: "rebate"},
                {key: "抵用券", value: "voucher"},
                {key: "代金券", value: "cash"}
            ]
        }),
        methods: {
            //还原弹出框位置
            resetBindDrag() {
                this.$refs.modal._resetBindDrag();
            },
            //查询按钮
            search: function() {
                dataTable.ajax.reload();
            },
            //重置按钮
            reset: function() {
                $(".form-inline")[0].reset();
                dataTable.ajax.reload();
            },
            getMcht(data) {
                let self = this;
                var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId
                self.$post({
                    url: "/api/v2" + projectName_Url + "/list/mcht/" + mchtId,
                    method: "GET"
                }).then(response => {
                    let list = response.content.info;
                    if (list.length == 1) {
                        list.unshift({key: "商户", value: ""});
                        self.$set("mchtList", list);
                    } else {
                        list.unshift({key: "所有商户", value: ""});
                        self.$set("mchtList", list);
                        self.mchtIdValue = list[0].value
                    }
                }, error => {
                });
            }
        },
        created() {
            //datatable所用数组
            columnsSet = [{
                title: "商户号",
                data: "mchtId",
                visible:false,
                className: "operate"
            }, {
                title: "商户名称",
                data: "mchtName",
                edit: true,
                readonly:true,
                className: "operate",
                className: "wrap-mid"
            },{
                title: "电子券名称",
                data: "name",
                className: "operate",
                className: "wrap-mid"
            }, {
                title: "类型",
                data: "type",
                className: "operate",
                className: "wrap-min",
                render: function (data) {
                    var value;
                    if (data == "rebate") {
                        value = '折扣券'
                    } else if (data == "voucher") {
                        value = '抵用券'
                    } else{
                        value = "代金券"
                    }
                    return value;
                }
            },{
                title: "图片",
                data: "picUrl",
                className: 'operate',
                className: "wrap-mid",
                render: function (data) {
                    if(data != ''){
                        return `<img class="table-avatar" src=` + data + `>`
                    }
                }
            },{
                title: "总张数",
                data: "couponNum",
                className: "operate",
                className: "wrap-min"
            },{
                title: "已发放张数",
                data: "issuedNum",
                className: "operate",
                className: "wrap-min"
            },{
                title: "渠道方名称",
                data: "channelId",
                className: "operate",
                className: "wrap-min",
                render: function(data) {
                    return (data == 'CIB') ? "兴业" : "浦发"
                }
            },{
                title: "使用类型",
                data: "channeltype",
                className: "operate",
                className: "wrap-min",
                render: function(data) {
                    return (data == 'travel') ? "优惠出行" : "优惠生活"
                }
            },{
                title: "跳转路径",
                data: "linkUrl",
                className: "operate",
                className: "wrap-mid"
            }]
        },
        ready: async function() {
            dateTime({
                format: "yyyy-mm-dd",
                minView: "2"
            })
            this.$set("columnsSet", columnsSet)
            var self = this;
            self.getMcht();
            //创建dataTable
            dataTable = $(this.$els.table).DataTable({
                "columns": this.columnsSet, //定义列
                "ajax": async function(data, callback, settings) {
                    var page = {
                        // "name": "iDisplayStart",
                        "value": 0 + data.start / data.length
                    };
                    var page = page.value;

                    //表单序列化数据
                    var _data = serialize(self.$els.form, {
                        hash: true,
                        disabled: true,
                        empty: true
                    });
                    _data.aoData = page;
                    //发送请求
                    var result = await self.$post({
                        url: "/api/v2" + projectName_Url + "/plat/channel/queryHistoryChannel",
                        data:_data,
                        method: "POST"
                    })
                    if (result.respCode != "00") {
                        Midway.alert({
                            title: "操作失败",
                            content: result.content
                        })
                    }
                    //即将过期的优惠券 有效日期显示红色
                    if (result.content.couponList != '' && result.content.couponList != null) {
                        for (var i in result.content.couponList) {
                            //获取当前时间戳
                            var d= new Date();
                            var d2 = d.getFullYear() + "-"+ (d.getMonth() + 1) +"-"+ d.getDate();
                            //月是一位数时自动补齐0
                            if((d.getMonth() + 1) < 10){
                                var d2 = d.getFullYear() + "-"+ "0"+(d.getMonth() + 1) +"-"+ d.getDate();
                            }
                            //日是一位数时自动补齐0
                            if(d.getDate() < 10){
                                var d2 = d.getFullYear() + "-"+ "0"+(d.getMonth() + 1) +"-"+"0"+d.getDate();
                            }
                            var str = d2.replace(/-/g,'');

                            if(parseInt(result.content.couponList[i].validatyEnd)-parseInt(str) < 0){
                                var list = result.content.couponList[i]
                                list.newParam = 'time';
                                list.time = true
                            }
                        }
                    }
                    callback({
                        recordsTotal: result.content.total,
                        recordsFiltered: result.content.total,
                        data: result.content.couponList || []
                    })
                    //即将过期的优惠券 有效日期显示红色
                    if (result.content.couponList != '' && result.content.couponList != null) {
                        for (var i in result.content.couponList) {
                            //获取当前时间戳
                            var d= new Date();
                            var d2 = d.getFullYear() + "-"+ (d.getMonth() + 1) +"-"+ d.getDate();
                            //月是一位数时自动补齐0
                            if((d.getMonth() + 1) < 10){
                                var d2 = d.getFullYear() + "-"+ "0"+(d.getMonth() + 1) +"-"+ d.getDate();
                            }
                            //日是一位数时自动补齐0
                            if(d.getDate() < 10){
                                var d2 = d.getFullYear() + "-"+ "0"+(d.getMonth() + 1) +"-"+"0"+d.getDate();
                            }
                            var str = d2.replace(/-/g,'');

                            if(parseInt(result.content.couponList[i].validatyEnd)-parseInt(str) < 0){
                                var trs = $('tbody tr td:nth-child(2)');
                                $(trs[i]).css('color','red');

                            }
                        }
                    }
                }
            });
        },
        beforeDestroy() {
            $(this.$el).off("click")
        }
    }
</script>
